<template>
  <div id="order" class="container" v-loading="loading">
    <el-tabs v-model="activeName" class="tab-card tabs-white" type="card" @tab-click="handleClick">
      <el-tab-pane v-for="item in langList" :key="item.id" :label="item.lang" :name="item.lang" />
    </el-tabs>
    <div class="content">
      <TableSearch :model="params">
        <template>
          <el-form-item :label="`${$t('文章标题')}：`">
            <el-input v-model="params.title" :placeholder="$t('请输入文章标题')" size="small" />
          </el-form-item>
          <el-form-item :label="`${$t('栏目')}：`">
            <el-select v-model="params.category_id" multiple filterable>
              <el-option v-for="item in columnDataSource" :key="item.id" :label="item.title" :value="item.id + ''" />
            </el-select>
          </el-form-item>
          <el-form-item :label="`${$t('状态')}：`">
            <el-select v-model="params.status">
              <el-option v-for="(label, value) in articleTypeEnums" :key="value" :label="label" :value="value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="handleSearch('search')">
              {{ $t('搜索') }}
            </el-button>
            <el-button size="small" @click="handleReset">
              {{ $t('重置') }}
            </el-button>
          </el-form-item>
        </template>
        <template #btn>
          <el-button type="primary" icon="el-icon-plus" @click="handleRouterContent">
            {{ $t('新增内容') }}
          </el-button>
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link el-icon-paperclip">
              {{ $t('查看副表') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in moduleData" :key="item.id" :command="item.id">
                {{ item.title }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="secondary" @click="handleOffline()">
            {{ $t('批量禁用') }}
          </el-button>
          <el-button type="secondary" @click="handleDelete()">
            {{ $t('批量删除') }}
          </el-button>
          <UploadFiles :loading.sync="loading" :lang="activeName" @success="handleReset"></UploadFiles>
        </template>
      </TableSearch>
      <BaseTable ref="baseTable" :request="request" :params.sync="params" :is-request="false"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" />
        <el-table-column label="ID" prop="id" width="55" />
        <el-table-column :label="$t('标题')" prop="title" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-link :href="scope.row.url" target="_blank">
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column :align="$t('副标题')" width="120px">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" width="" trigger="click" :content="scope.row.sub_title">
              <span slot="reference" class="subTitle">
                {{ scope.row.sub_title }}
              </span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column :label="$t('栏目')" width="120px">
          <template slot-scope="scope">
            {{ getCategoryName(scope.row.category) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('排序')" prop="sort" width="60px" />

        <el-table-column :label="$t('状态')" width="150px">
          <template slot-scope="scope">
            {{ articleTypeEnums[scope.row.new_status] }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('缩略图')" width="100px">
          <template slot-scope="scope">
            <el-image v-if="scope.row.thumbnail" style="width: 100%; height: auto" :src="scope.row.thumbnail.url"
              :fit="'cover'" :preview-src-list="[scope.row.thumbnail.url]">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column :label="$t('发布时间')" prop="publish_time" width="160px" />
        <!-- <el-table-column
          :label="$t('当前处理人')"
          prop="check_users"
          width="130px"
        /> -->
        <el-table-column :label="$t('点击量')" prop="hits" width="70px" />
        <el-table-column :label="$t('操作')" fixed="right" width="150px" align="right">
          <template slot-scope="scope">
            <EditBtn @click="editor(scope.row)" />
            <DelBtn @success="handleDelete(scope.row.id)" :confirm-content="$t('内容放入回收站')" />
            <BaseDropdown @command="operationCommand($event, scope.row)">
              <el-dropdown-item v-if="scope.row.new_status === 1" command="disabled">
                {{ $t('禁用') }}
              </el-dropdown-item>
              <el-dropdown-item v-if="scope.row.new_status === 5" command="un-disabled">
                {{ $t('启用') }}
              </el-dropdown-item>
              <el-dropdown-item command="copy">
                {{ $t('复制') }}
              </el-dropdown-item>
            </BaseDropdown>
          </template>
        </el-table-column>
      </BaseTable>
    </div>
  </div>
</template>
<script>
import columnApi from '@/api/column.js'
import contentApi from '@/api/module'
import websetApi from '@/api/websetting'
import { articleTypeEnums } from '@/enums/article'
import UploadFiles from './components/uploadFiles.vue'
export default {
  components: { UploadFiles },
  data() {
    return {
      request: columnApi.contentList,
      loading: false,
      articleTypeEnums,
      columnDataSource: [],
      params: {
        website_id: '',
        lang: '',
        category_id: [],
        title: '' // 搜索标题
      },
      list: [],
      options: [], // 站点
      contentData: [], // 内容
      moduleData: '',
      checkedKeys: [],

      val: {},
      totalAmount: '',
      category_id: '',
      activeName: 'zh',
      langList: [],
      tableSelectionData: [] // table 选中数据
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      if (val) {
        this.params.website_id = val
        this.$router.push({ query: {} })
        this.params.category_id = []
        this.getLang()
      }
    }
  },
  created() {
    this.siteId = this.$store.getters.siteId

    const lang = this.$route.query.lang
    if (lang) {
      this.activeName = lang
    }

    if (this.$route.query.category_id) {
      if (Array.isArray(this.$route.query.category_id)) {
        this.params.category_id = this.$route.query.category_id
      } else {
        const category_id = this.$route.query.category_id + ''
        this.params.category_id = [category_id]
      }
    }

    if (this.siteId) {
      this.getLang()
      this.params.website_id = this.siteId
    }
    this.getModule()
  },

  methods: {
    // 更多操作
    operationCommand(key, row) {
      switch (key) {
        case 'disabled':
          this.handleOffline(row.id)
          break
        case 'un-disabled':
          this.handleOffline(row.id, 'online')
          break
        case 'copy':
          this.handleCopy(row)
          break
      }
    },
    handleSelectionChange(val) {
      this.tableSelectionData = val
    },
    // 批量删除
    async handleDelete(id) {
      if (!id) {
        if (!this.tableSelectionData.length) {
          this.$message.error(this.$t('请先选中数据'))
          return
        }
      }
      const ids = this.tableSelectionData.map(item => item.id)
      const res = await columnApi.deleteContent({
        ids: id || ids
      })
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getContent()
      }
    },
    // 批量禁用
    async handleOffline(id, type) {
      if (!id) {
        if (!this.tableSelectionData.length) {
          this.$message.error(this.$t('请先选中数据'))
          return
        }
      }
      const res = await this.$confirm(
        `${this.$t('此操作将该内容')}${type === 'online' ? this.$t('启用') : this.$t('禁用')
        }, ${this.$t('是否继续')}`,
        this.$t('提示'),
        {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消')
        }
      ).catch(err => console.log(err))
      if (res) {
        const ids = this.tableSelectionData.map(item => item.id)
        const result = await columnApi.changeContentStatus({
          id: id || ids,
          status: type === 'online' ? 1 : 2
        })
        if (result.code == 0) {
          this.$message.success(res.msg)
          this.getContent()
        }
      }
    },
    handleReset() {
      this.params.title = ''
      this.params.category_id = []
      this.params.status = ''

      this.$refs.baseTable.getList('search')
    },
    getCategoryName(row) {
      return row.map(item => item.title).join(',')
    },
    handleRouterContent() {
      this.$router.push({
        name: 'addContent',
        query: {
          lang: this.activeName == 0 ? 'zh' : this.activeName
        }
      })
    },
    async getCategoryList() {
      const res = await contentApi.getModuleCate({
        ...this.params,
        site_id: [this.siteId],
        lang: this.activeName == 0 ? 'zh' : this.activeName
      })
      this.columnDataSource = res.data?.[0]?.category || []
    },
    topOpt(row) {
      const val = {
        id: row.id,
        is_top: row.is_top
      }
      columnApi.topOpt(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    recommend(row) {
      const val = {
        id: row.id,
        is_recommend: row.is_recommend,
        type: 'recommend'
      }
      columnApi.recommendAndStatus(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        }
      })
    },
    // 获取站点语言
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        if (res.data.length > 0) {
          this.params.lang = this.activeName
        }
        this.getCategoryList()
        this.getContent('search')
      })
    },
    // tab切换
    handleClick(val) {
      this.activeName = val.name
      this.params.lang = val.name
      this.getCategoryList()
      this.handleReset()
    },
    handleSearch() {
      this.$router.push({ query: { category_id: this.params.category_id } })
      console.log(this.params)
      this.getContent('search')
    },
    // 栏目内容列表
    getContent(type) {
      this.$refs.baseTable.getList(type)
    },
    getModule() {
      contentApi.moduleList({ website_id: this.website_id }).then(res => {
        this.moduleData = res.data
      })
    },
    // 查看副表
    handleCommand(val) {
      this.$router.push({
        name: 'ColumnInfo',
        query: { id: val, website_id: this.siteId }
      })
    },
    // 复制
    handleCopy(row) {
      console.log(row.module_id)
      this.$router.push({
        name: 'updateContent',
        query: {
          id: row.id,
          lang: this.activeName,
          module_id: row.module_id,
          website_id: this.siteId,
          type: 'copy'
        }
      })
    },
    // 编辑
    editor(row) {
      const val = {
        id: row.id,
        module_id: row.module_id,
        lang: this.activeName,
        website_id: this.siteId
      }
      columnApi.contentInfo(val).then(res => {
        if (res.code == 0) {
          const website = res.data.content.website
          const category = res.data.content.category
          this.$router.push({
            name: 'updateContent',
            query: {
              id: row.id,
              category_id: category,
              module_id: row.module_id,
              lang: this.activeName,
              siteId: website
            }
          })
        }
      })
    },
    // 查看
    check(row) {
      this.$router.push({ name: 'ColumnInfo', query: { id: this.siteId } })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep {
  .tab-card.el-tabs--card .el-tabs__content {
    padding: 0 16px;
  }
}

.content {
  background-color: #fff;
  padding: 0 16px;
}

.el-table {
  margin-bottom: 20px;
}

.button-box {
  .el-dropdown-link {
    //模拟按钮
    cursor: pointer;
    color: var(--huocms-com-color-primary);
    border: solid 1px var(--huocms-com-color-primary);
    padding: 8px 17px;
    font-size: 14px;
    border-radius: 4px;
    margin-right: 8px;
  }
}

.subTitle {
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
</style>
